<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/back/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/back/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="/back/js/jquery.min.js"></script>
    <script src="/back/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/back/zTree/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/back/js/myTree.js"></script>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户信息</legend>
</fieldset>

<form class="layui-form" id="userForm">
    <input type="hidden" id="formId" name="pk" value="${user.pk}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><font color="red">※</font>用户账号</label>
            <div class="layui-input-inline">
                <input type="text" name="account"  id="account" value="${user.account}"
                       lay-verify="account" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"><font color="red">※</font>用户电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" id="phone" value="${user.phone}" lay-verify="phone" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" id="email" value="${user.email}" lay-verify="email" lay-ignore="true" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"><font color="red">※</font>用户昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" value="${user.name}" lay-verify="notNull" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <#if user.pk??>
        <#else>
        <div class="layui-inline">
            <label class="layui-form-label"><font color="red">※</font>用户密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" id="password"
                       lay-verify="password" value="${user.password}" autocomplete="off" class="layui-input">
            </div>
        </div>
        </#if>
        <div class="layui-inline">
            <label class="layui-form-label">用户生日</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" id="birthday" value="${user.birthday}"
                       autocomplete="off" class="layui-input ">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-inline">
                    <select name="sex" id="sex" autocomplete="off"  >
                         <option value="">请选择用户性别</option>
                         <option value="1" <#if user.sex=="1">selected="selected"</#if> >男</option>
                         <option value="2" <#if user.sex=="2">selected="selected"</#if> >女</option>
                    </select>
            </div>
        </div>
        <!--<div class="layui-inline">
            <label class="layui-form-label">所属部门</label>
            <input type="hidden" name="deptPk" id="PDEPT_KEYHide" value="${user.deptPk}">
            <div class="layui-input-inline">
                <div name="PDEPT_KEY" lay-filter="PDEPT_KEY" id="PDEPT_KEY" class="layui-form-select select-tree" lay-search=""></div>
            </div>
        </div>-->
    </div>
    <!--<div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户角色</label>
            <input type="hidden" name="rolePk" id="ROLE_KEYHide" value="${user.rolePk}">
            <div class="layui-input-inline">
                <div name="ROLE_KEY" lay-filter="ROLE_KEY" id="ROLE_KEY" class="layui-form-select select-tree" lay-search=""></div>
            </div>
        </div>
    </div>-->

    <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">立即提交</button>
            <button class="layui-btn layui-btn-primary layui-btn-radius" type="reset">重置</button>
        </div>
    </div>
</form>
<script>
    $(document).ready(function () {
        /*$.ajax({
            url : "/dept/tree",
            type : "POST",
            dataType : 'json',
            success : function(data) {
                var spk = "${user.deptPk}";
                initSelectTree("PDEPT_KEY", true, {"Y": "ps", "N": "s"},data)
                var treeObj = $.fn.zTree.getZTreeObj("PDEPT_KEYTree");
                if(spk!=null && spk!='' && spk!=undefined){
                    var node = treeObj.getNodeByParam("id",spk);
                    if(node!=null && node!='' && node!=undefined ){
                        treeObj.checkNode(node, true, true);//回显节点选中状态
                        $("#PDEPT_KEYShow").val(node.name);//回显名称
                    }
                }
                treeObj.expandAll(true);
            }
        });
        $.ajax({
            url : "/role/tree",
            type : "POST",
            dataType : 'json',
            success : function(data) {
                var spk = "${user.rolePk}";
                initSelectTree("ROLE_KEY", true, {"Y": "ps", "N": "s"},data)
                var treeObj = $.fn.zTree.getZTreeObj("ROLE_KEYTree");
                if(spk!=null && spk!='' && spk!=undefined){
                    var node = treeObj.getNodeByParam("id",spk);
                    if(node!=null && node!='' && node!=undefined ){
                        treeObj.checkNode(node, true, true);//回显节点选中状态
                        $("#ROLE_KEYShow").val(node.name);//回显名称
                    }
                }
                treeObj.expandAll(true);
            }
        });*/
    });

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#birthday'
        });


        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            notNull: function (value) {
                if (value.length <= 0) {
                    return '信息必填';
                }
            }
            , password: [
                /^[\w_-]{6,16}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , email: [
                /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , phone: [
                /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
                , '手机号码格式异常'
            ]
            , account: [
                /^[A-Za-z0-9]{4,16}$/
                , '请输入4位以上的英文或数字组合'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            layui.use(['jquery'], function () {
                var $ = jQuery = layui.$;
                var postUrl = "/user/saveOrUpdate";
                $.ajax({
                    url: postUrl,
                    type: 'post',
                    data: $("#userForm").serialize(),
                    success: function (resp) {
                        $("#formId").val(resp.data);
                        layer.msg(resp.message);
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        parent.initTable();//刷新表格数据
                    },
                    error: function (resp) {
                        layer.msg(resp.message);
                    }
                });
            });
            return false;
        });
    });
</script>

</body>
</html>